<template>
    <div>
        <h1>{{ msg }}</h1>
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ ageCopy + 1 }}</h2>
        <button @click="changeAge">年龄自增</button>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Student",
    // props: ['name', 'age'], // 简单接收
    // props: { // 限制类型接收
    //     name: String,
    //     age: Number
    // },
    props: {
        name: {
            type: String,
            required: true // 必要的
        },
        age: {
            type: Number,
            default: 99 // 如果不传，就是这个默认值
        }
    },
    data() {
        return {
            msg: 'HelloWord',
            ageCopy: this.age // 注意：vue不建议直接修改props传过来的值，可以用data接收
        }
    },
    methods: {
        changeAge() {
            this.ageCopy++;
        }
    }
}
</script>

<style scoped>

</style>